<template>
  <div class="bg-light clear">
    <div class="container-title">基础设置</div>
    <Form :label-width="100" :rules="rule" ref="form" :model="form">
      <FormItem label="促销名称" prop="name">
        <Input placeholder="请输入促销名称" v-model="form.name" :maxlength="15" class="wp40"/>
      </FormItem>
      <FormItem label="宣传语" prop="slogan">
        <Input placeholder="请输入促销名称" v-model="form.slogan" :maxlength="60" class="wp40"/>
      </FormItem>
      <FormItem label="活动时间" prop="date">
        <fomatDate
          class="wp40"
          :DateValue="form.date"
          v-model="form.date">
        </fomatDate>
        <!-- <DatePicker
          type="datetimerange"
          placement="bottom-end"
          v-model="form.date"
          :options="options"
          class="wp40"
          placeholder="请选择活动时间"
        ></DatePicker> -->
      </FormItem>
      <Row>
        <Col span="10">        
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade">
              <Checkbox :label="item.value" v-for="item in storeTypeData" :key="item.id">{{item.text}}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
      </Row>
      <FormItem label="促销类型" prop="type">
        <RadioGroup v-model="form.type">
          <Radio label="1">直降</Radio>
          <Radio label="2">限时抢购</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="限购条件" prop="term">
        <CheckboxGroup v-model="form.term">
          <Checkbox :label="item.id" v-for="item in termList" :key="item.id">{{item.name}}</Checkbox>
        </CheckboxGroup>
      </FormItem>
      <div class="flexLeft">
        <div class="col-bottom">
          <FormItem label="限制数量" prop="num">
            <RadioGroup v-model="form.num">
              <Radio label="1">不限制购买数量</Radio>
              <Radio label="2">按SKU限制，每单每个SKU最少</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div class="col-bottom">
          <FormItem prop="least">
            <Input
              :disabled="hasMinMax"
              v-model="form.least"
              :min="0"
              :max="999"
              :maxlength="6"
              style="width: 60px"
            />最多
          </FormItem>
        </div>
        <div class="col-bottom">
          <FormItem prop="max">
            <Input
              :disabled="hasMinMax"
              v-model="form.max"
              :min="0"
              :maxlength="6"
              :max="999"
              class="ml"
              style="width: 60px"
            />
          </FormItem>
        </div>
      </div>
      <FormItem label="促销说明" prop="remas">
        <Input
          placeholder="请输入促销说明"
          type="textarea"
          v-model="form.remarks"
          :maxlength="128"
          class="wp40"
        />
      </FormItem>
    </Form>
  </div>
</template>
<script>
import fomatDate from '@/components/ChoseDateFormat'
export default {
  components: {
    fomatDate
  },
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      termList: [
        {
          id: 2,
          name: "限帐号"
        }
      ],
      rule: {
        name: [{ required: true, message: "请输入促销名称", trigger: "blur" }],
        date: [
          {
            required: true,
            message: "请开始时间",
            trigger: "change",
            type: "array",
            // fields: {
            //   0: { type: "date", required: true, message: "请输入起止日期" },
            //   1: { type: "date", required: true, message: "请输入起止日期" }
            // }
          }
        ],
        least: [{ validator: this.validateLeast, trigger: "change" }],
        max: [{ validator: this.validateMax, trigger: "change" }],
        type: [{ required: true, message: "请选择促销类型", trigger: "blur" }],
        grade: [
          {
            required: true,
            message: "请选择活动对象",
            type: "array",
            trigger: "change"
          }
        ],
        term: [{ validator: this.validateTerm, trigger: "change" }],
        num: [{ required: true, message: "请选择限购数量", trigger: "blur" }],
        remarks: [
          { required: true, message: "请输入促销说明", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    validateTerm(rule, value, callback) {
      this.$store.commit("validateSingleTerm", { rule, value, callback });
    },
    validateLeast(rule, value, callback) {
      this.$store.commit("validateSingleLeast", { rule, value, callback });
    },
    validateMax(rule, value, callback) {
      this.$store.commit("validateSingleMax", { rule, value, callback });
    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  computed: {
    hasMinMax() {
      return this.$store.getters.hasSingleMinMax;
    },
    storeTypeData() {
      return this.$store.getters.storeTypeData;
    }
  }
};
</script>
